<template>
  <div class="success-container">
    <el-card class="success-card" shadow="hover">
      <!-- 支付流程步骤（全绿打勾） -->
      <div class="payment-steps-wrapper">
        <el-steps :active="3" finish-status="success" class="payment-steps">
          <el-step title="提交订单" description="已成功提交订单"></el-step>
          <el-step title="确认支付" description="请完成支付"></el-step>
          <el-step title="完成" description="支付成功"></el-step>
        </el-steps>
      </div>

      <div class="success-content">
        <!-- 支付成功结果 -->
        <el-result
          icon="success"
          title="支付成功"
          sub-title="您的订单已支付成功，我们会尽快处理您的订单"
        >
          <template #extra>
            <!-- 订单信息 -->
            <div class="order-info">
              <p class="info-item">
                <span class="label">订单编号：</span>
                <span class="value">{{ orderId || '--' }}</span>
              </p>
              <p class="info-item">
                <span class="label">支付金额：</span>
                <span class="value">¥{{ paymentAmount || '0.00' }}</span>
              </p>
              <p class="info-item">
                <span class="label">支付时间：</span>
                <span class="value">{{ paymentTime || '--' }}</span>
              </p>
            </div>

            <!-- 返回按钮 -->
            <div class="action-buttons">
              <el-button type="primary" @click="goToHome">返回首页</el-button>
            </div>
          </template>
        </el-result>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

// 路由实例
const router = useRouter();

// 订单信息响应式数据
const orderId = ref('');
const paymentAmount = ref('0.00');
const paymentTime = ref('');

// 格式化当前时间
const getCurrentTime = () => {
  const now = new Date();
  return [
    now.getFullYear(),
    String(now.getMonth() + 1).padStart(2, '0'),
    String(now.getDate()).padStart(2, '0')
  ].join('-') + ' ' + [
    String(now.getHours()).padStart(2, '0'),
    String(now.getMinutes()).padStart(2, '0')
  ].join(':');
};

// 返回首页方法
const goToHome = () => {
  router.push('/');
};

// 生命周期钩子：初始化数据
onMounted(() => {
  // 设置支付时间为当前时间
  paymentTime.value = getCurrentTime();

  // 从路由参数获取订单信息
  const route = router.currentRoute.value;
  if (route.query.orderId) orderId.value = route.query.orderId;
  if (route.query.amount) paymentAmount.value = route.query.amount;

  // 从本地存储获取订单数据（可选）
  const orderData = localStorage.getItem('lastOrder');
  if (orderData) {
    try {
      const data = JSON.parse(orderData);
      orderId.value = data.orderId || orderId.value;
      paymentAmount.value = data.amount || paymentAmount.value;
    } catch (error) {
      console.error('解析订单数据失败:', error);
    }
  }
});
</script>

<style scoped>
.success-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 20px;
  background-color: #f5f7fa;
}

.success-card {
  width: 100%;
  max-width: 800px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.success-content {
  padding: 0 20px 20px;
}

/* 流程图样式 */
.payment-steps-wrapper {
  padding: 20px 20px 0;
}

.payment-steps {
  margin-bottom: 20px;
}

.payment-steps :deep(.el-step__head.is-finish) {
  color: #67C23A;
  border-color: #67C23A;
}

.payment-steps :deep(.el-step__title.is-finish) {
  color: #67C23A;
}

.payment-steps :deep(.el-step__description.is-finish) {
  color: #67C23A;
}

.payment-steps :deep(.el-step__icon) {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.payment-steps :deep(.el-step__icon.is-text) {
  border-width: 2px;
}

.payment-steps :deep(.el-step.is-finish .el-step__icon) {
  background-color: #67C23A;
  border-color: #67C23A;
}

.payment-steps :deep(.el-step.is-finish .el-step__icon-inner) {
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* 订单信息样式 */
.order-info {
  width: 100%;
  max-width: 450px;
  margin: 0 auto 30px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 15px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  color: var(--el-text-color-secondary);
  font-weight: 500;
}

.value {
  color: var(--el-text-color-primary);
  font-weight: 600;
}

/* 按钮样式 */
.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.action-buttons .el-button {
  width: 140px;
  height: 44px;
  font-size: 16px;
}
</style>